<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图选址功能</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=37f039f77afe1828a092628eab6c68a3"></script>
    <style>
        #map { width: 100%; height: 500px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <div>
        <label for="location">选址经纬度:</label>
        <input type="text" id="location" placeholder="点击地图选址">
    </div>
    <div>
        <label for="address">选中地址:</label>
        <input type="text" id="address" placeholder="选中的地址">
    </div>

    <script>
        var map = new AMap.Map('map', {
            zoom: 10,
            center: [116.397428, 39.90923]
        });

        map.on('click', function(e) {
            var lnglat = e.lnglat;
            var lng = lnglat.getLng();
            var lat = lnglat.getLat();
            console.log("选中的经纬度：", lng, lat);

            var marker = new AMap.Marker({
                position: lnglat,
                map: map
            });

            document.getElementById('location').value = "经度：" + lng + " 纬度：" + lat;

            var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });

            geocoder.getAddress([lng, lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    var address = result.regeocode.formattedAddress;
                    console.log("选中的位置地址：", address);
                    document.getElementById('address').value = address;
                }
            });
        });
    </script>
</body>
</html>
